import React, {Component} from 'react';
import Circle from './lib/Circle';
import M33_1 from './lib/M33_1.mp4';
import pc from './lib/Browser';

require('./css/frame.css');

export default class P31 extends Component {
  constructor(...args) {
    super(...args);
    this.state = {
      index: [1,0,0],
      flag: 'none',
      divflag:'none'
    };
  }

  onSlider(i) {
    let index = [0, 0,0];
    index[i] = 1;
    this.setState({
      index
    });
  }
  onOver(e) {
    this.setState({
      divflag:'block'
    });
  }

  onOut() {
    this.setState({
      divflag:'none'
    });
  }

  onClick() {
    let {divflag} = this.state;
    divflag= (divflag === 'none' ?'block':'none');
    this.setState({
      divflag
    });
  }

  render() {
    const {index, flag,divflag} = this.state;
    return (
      <div id="page">
        <div className="content" id="box31">
          <h4 className="title">利用MIB对空调系统的操作 </h4>

          {index[0] === 1 && <div className='box31Cont' id='box310'>
            <div className='infodiv'>空调操作的“软按键”功能。</div>
            <img src={require('./img/31_0.jpg')} style={{marginTop: 50}}/>
            <p style={{top: 145}}>点击MIB面板中的“MENU”按键，通过翻页找到“空调”的软按键</p>
            <p style={{top: 260}}>点击空调按键图标后，进入MIB空调操作界面</p>
            <p style={{top: 365}}>点击设置按键后，进入”自动车内空气循环”和“方向盘加热装置”功能选择界面</p>

            <video src={M33_1} controls width='500'></video>
          </div>}

          {index[1] === 1 && <div className='box31Cont' id='box311'>
            <div className='infodiv'>对于装备MIB及全自动空调系统的车辆，<br></br>
              空调功能的操作既可以通过MIB中空调操作界面的软按键进行，亦可以通过空调操作面板的操作按键进行，二者同步。
            </div>
            <img src={require('./img/31_2.jpg')} style={{
              position: 'absolute',
              left: 310,
              top: 140
            }}/>


            <Circle style={{left: '575', top: '521'}} data='净化空气的车内空气循环运行模式。'/>
            <Circle style={{left: '510', top: '521'}} data='左右出风口温度进行同步设置。'/>
            <Circle style={{left: '430', top: '521'}} data=' 接通和关闭全自动空调。'/>


            <img
              src={require("./img/red0.png")}
              className="circle"
              style={{left: 495, top: 270}}
              onClick={this.onClick.bind(this)}
              onMouseOver={this.onOver.bind(this)}
              onMouseOut={this.onOut.bind(this)}
            />

            <div id="tip31" style={{left:510,top:170 ,'display':divflag}} >
                <p>方向盘加热功能。<br></br>
                若事先在MIB中设置方向盘和座椅加热同步后，通过硬按键控制开启座椅和方向盘加热功能，MIB中软按键同时点亮；<br></br>
                若未事先开启同步功能，则可通过MIB界面中软按键单独控制方向盘加热功能。</p>
            </div>

          </div>}

          {index[2] === 1 && <div className='box31Cont' id='box312'>
            <div className='infodiv'>点击”MENU”按键，进入空调功能的设置界面，在设置界面中，
              新增了双区空调的温度设置操作按键。</div>
            <img src={require('./img/31_3.jpg')} style={{marginTop:60}}/>
            <p style={{top: 145,
              position: 'absolute',
              left:385,
              width: 220}}>双区空调出风口温度设置按键</p>


          </div>}

          <div id="csld" className="sldcir" style={{left: 425}}>
            {index.map((item, i) => {
              let sr = (item === 1 ? 'son' : 'soff');
              return (
                <img key={i} src={require('./img/' + sr + '.png')} onClick={this.onSlider.bind(this, i)}/>);
            })}
          </div>

        </div>
      </div>
    );
  }
}


